<html>
  <head>
    <meta charset="UTF-8" />
    <style>
      body {
        margin: 0;
        background: linear-gradient(-45deg, #a6a6a6, #5ac05a, #262626, #a6a6a6);
        background-size: 400% 400%;
        animation: gradient 15s ease infinite;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      canvas {
        background-color: white;
      }

      @keyframes gradient {
        0% {
          background-position: 0% 50%;
        }
        50% {
          background-position: 100% 50%;
        }
        100% {
          background-position: 0% 50%;
        }
      }
    </style>
  </head>
  <body>
    <button id="start-game-btn">
      Start Game
    </button>
    <canvas id="nandu"></canvas>
  </body>
  <script type="module">
    import init from './bally/bevy-ball-game.js'
    document.getElementById('start-game-btn').addEventListener('click', () => {
      init()
    })
  </script>
</html>
